<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/hiprint.css" rel="stylesheet" />
    <link href="css/print-lock.css" rel="stylesheet" />

    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./plugins/jquery.min.js"></script>
    <script src="../static/axios.js"></script>
    <style>
        .layout {
            display: flex !important;
        }

        .ModelClass {
            margin-left: 50px;
        }

        .ModelClass1 {
            margin-top: 20px;
        }

        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            width: 400px;
            height: 300px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        #popup-div {
            width: 100%;
            height: 15%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #popup-div2 {
            width: 100%;
            height: 15%;
            display: flex;
        }

        #close-button {
            width: 20%;
            text-align: left;
        }

        #popup h2,
        #popup p {
            margin-top: 0;
        }

        #close-button:hover {
            color: #0052a3;
            cursor: pointer;
        }

        /* 模态背景 */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            display: none;
        }

        .modal-content {
            width: 300px;
        }

        .pStyle {
            width: 178px;
            height: 20px;
            background-color: #ccc;
            margin: 0;
        }
    </style>

</head>

<body>
    <layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">
        <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
            <div class="container-fluid height-100-per print-content">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-9 col-md-10">
                                <div class="hiprint-toolbar" style="margin-top:15px;">
                                    <div style="clear:both;"></div>
                                </div>
                                <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">

                                </div>

                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </content>
        <div class="ModelClass">
            <div class="ModelClass1">
                <a id="A4_directPrint" class="btn hiprint-toolbar-item "
                    style="color: #fff;background-color: #d9534f;border-color: #d43f3a;">打印</a>
            </div>
        </div>
    </layout>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width: 825px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">打印预览</h4>
                </div>

                <div class="modal-body">
                    <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
                    <div class="prevViewDiv"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>
    <script src="custom_test/custom-etype-provider.js"></script>
    <script src="custom_test/custom-print-json.js"></script>
    <script src="custom_test/print-data.js"></script>
    <script src="polyfill.min.js"></script>
    <script src="plugins/jquery.minicolors.min.js"></script>
    <script src="plugins/JsBarcode.all.min.js"></script>
    <script src="plugins/qrcode.js"></script>
    <script src="hiprint.bundle.js"></script>
    <script src="plugins/jquery.hiwprint.js"></script>
    <!-- <script src="./css/bootstrap.min.css"></script> -->
    <script>
        var tokens = sessionStorage.getItem('USER-TOKEN-KEY')
        let baseURL
        let host = window.location.host
        let reg = /^localhost+/
        if (reg.test(host)) {
            baseURL = 'http://localhost:8222/api'
        } else {
            baseURL = '/api'
        }
        const service = axios.create({
            baseURL,
            timeout: 10 * 60 * 1000,
            withCredentials: true, // 跨域请求时发送cookie
        })
        service.interceptors.response.use((res) => {
            return res.data
        })
        var post = (op) => {
            return service.post(op.url,
                op.data, {
                headers: {
                    token: tokens
                }
            }
            )
        }
        var hiprintTemplate
        var printDatas
        var jbhIndex
        var printDatasList = []
        $(document).ready(function () {
            $("#popup").hide()
            $("#overlay").hide()
            const paramsString = window.location.search
            const searchParams = new URLSearchParams(paramsString)
            post({
                url: 'planSingle/clothfiy/geOldClothFiyInfo',
                data: JSON.parse(searchParams.get('id'))
            }).then((resc) => {
                if (resc.code == 200) {
                    printDatasList = resc.data
                }
            })
            hiprint.init({
                providers: [new customElementTypeProvider()]
            })

            hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))

            hiprintTemplate = new hiprint.PrintTemplate({
                template: JSON.parse(JSON.parse(searchParams.get('model'))),
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
            })
            hiprintTemplate.design('#hiprint-printTemplate')
            $('#A4_directPrint').click(function () {
                printDatasList.forEach((res) => {
                    res['qrcode'] = res.clothfiyCode
                    res['barcode'] = res.barCode
                    res['drawnNeedleState'] = res['drawnNeedleState'] == '0' ? '抽针' : res['drawnNeedleState'] == '1' ? '圆筒' : ''
                })
                hiprintTemplate.print(printDatasList)
                setTimeout(() => {
                    location.reload()
                }, 2000)
            })
        });

    </script>
</body>

</html>